// 使用对象存储常量
const BaseConfig = {
	INPUT_CLASS: 'category-input',
	ITEM_CLASS: 'category-item'
}

class Category {
	constructor(options) {
		this.data = options.data;
		this.activeIndex = options.active || 0;
		this.categoryName = options.name || 'category';
		this.container = document.querySelector(options.container);
		this.onChange = options.onChange || function() {}
		this.init();
	}

	init() {
		this.render();
		this.addStyles();
		this.bindEvents();
	}

	render() {
		if (this.data.length == 0) return;
		const html = this.data.map((item, index) =>
			this.generateItem(item, index)
		).join('');
		this.container.innerHTML = html;
	}

	generateItem(item, index) {
		const isActive = index === this.activeIndex;
		const inputName = this.categoryName;
		const inputId = `${inputName}_${item.groupId}`;
		const checkedAttr = isActive ? 'checked' : '';

		return `<input type="radio" id="${inputId}" name="${inputName}" class="${BaseConfig.INPUT_CLASS}" data-index="${index}" readonly  ${checkedAttr}/>
				<label for="${inputId}" class="${BaseConfig.ITEM_CLASS}">${item.name}</label>`
	}

	bindEvents() {
		//纯原生写法，不依赖jquery
		this.container.addEventListener('change', e => {
			if (e.target.classList.contains(BaseConfig.INPUT_CLASS)) {
				let index = e.target.dataset.index;
				this.activeIndex = index;
				let item = this.data[index];
				this.onChange({
					activeIndex: index,
					...item
				});
			}
		})
		//借助jquery写法
		// $(this.container).on('change', `.${BaseConfig.INPUT_CLASS}`, (e) => {
		// 	let index = e.target.dataset.index;
		// 	this.activeIndex = index;
		// 	let item = this.data[index];
		// 	this.onChange({
		// 		index,
		// 		...item
		// 	});
		// })
	}

	update(newData) {
		this.data = newData;
		this.activeIndex = 0;
		this.render();
	}

	addStyles() {
		this.styleElement = document.createElement('style');
		this.styleElement.textContent = `
		  .${BaseConfig.ITEM_CLASS} {
		  	display: flex;
		  	flex-direction: row;
		  	align-items: center;
		  	position: relative;
		  	padding: var(--gap);
		  	user-select: none;
		  	cursor: pointer;
		  	transition: all 0.3s ease;
		  	border-left: var(--category-tab-border-left) solid transparent;
		  	font-size: var(--font-size-primary);
		  }
		  
		  .${BaseConfig.INPUT_CLASS}:checked+.${BaseConfig.ITEM_CLASS} {
		  	background: var(--category-tab-active-bg);
		  	color: var(--primary);
		  	border-left: var(--category-tab-border-left) solid var(--primary);
		  }
		  
		  .${BaseConfig.INPUT_CLASS}:checked+.${BaseConfig.ITEM_CLASS}::before {
		  	content: '';
		  	position: absolute;
		  	right: 0;
		  	top: calc(-1 * var(--category-tab-radius) + 1px);
		  	width: var(--category-tab-radius);
		  	height: var(--category-tab-radius);
		  	background: radial-gradient(circle at 0 0,
		  			transparent calc(var(--category-tab-radius) - 1px),
		  			white var(--category-tab-radius));
		  	z-index: 1;
		  }
		  
		  .${BaseConfig.INPUT_CLASS}:checked+.${BaseConfig.ITEM_CLASS}::after {
		  	content: '';
		  	position: absolute;
		  	right: 0px;
		  	bottom: calc(-1 * var(--category-tab-radius) + 1px);
		  	width: var(--category-tab-radius);
		  	height: var(--category-tab-radius);
		  	background: radial-gradient(circle at 0 100%,
		  			transparent calc(var(--category-tab-radius) - 1px),
		  			white var(--category-tab-radius));
		  	z-index: 1;
		  }
		  
		  .${BaseConfig.INPUT_CLASS} {
		  	display: none;
		  	opacity: 0;
		  	width: 0;
		  	height: 0;
		  }
		`;
		document.head.appendChild(this.styleElement);
	}
}
